<template>
  <div>
    <div class="box">
      <ul>
        <li><van-icon name="arrow-left" /></li>
        <li><img src="../assets/我的客户/系统功能.png" alt="" /></li>
      </ul>
      <div class="box-1">
        <div class="box-2">
          <img src="../assets/我的客户/头像.png" alt="" />
        </div>
        <ul class="box-3">
          <li>名称:{{custName}}</li>
          <li>电话:{{telephone}}</li>
        </ul>
        <button class="box-4" @click="$router.push(`/custkhxx?id=${$route.query.id}`)" >客户信息</button>
      </div>
    </div>
    <van-tabs v-model="active">
      <van-tab title="收入分析"><Custsrfx :datas='datas' :list='list' /></van-tab>
      <van-tab title="旗下企业"><Custqxqy :dataqxqy='dataqxqy'/></van-tab>
      <van-tab title="合作伙伴"><Custhzhb :datahzhb='datahzhb' /></van-tab>
      <van-tab title="当年收入"><Custdnsr  :datadnsr="datadnsr"/></van-tab>
    </van-tabs>
  </div>
  <!-- 

belongUser: "1354275382904549377"
cityName: "北京"
company: "家里蹲"
createTime: "2021-01-27 11:50:00"
custName: "里斯1"

   -->
</template>

<script>
import Custsrfx from '../components/Custsrfx'
import Custqxqy from '../components/Custqxqy'
import Custhzhb from '../components/Custhzhb'
import Custdnsr from '../components/Custdnsr'
import {CustidData} from '../request/api'

export default {
  data() {
    return {
      active:0,
      custName:'',
      telephone:'',
      //收入分析
      datas:[],
      list:[],
      //旗下企业
      dataqxqy:[],
      //合作伙伴
      datahzhb:[],
      //当年收入
      datadnsr:[],
    };
  },
  components:{
    Custsrfx,
    Custqxqy,
    Custhzhb,
    Custdnsr
  },
  created(){
    CustidData({
      id:this.$route.query.id
    }).then(res=>(
      this.custName=res.data.custName,
      this.telephone=res.data.telephone,
      //收入分析
      this.datas=res.data.datas[0].data,
      this.list=res.data.datas[0].data.list,
      //旗下企业
      this.dataqxqy=res.data.datas[3].data,
      //合作伙伴
      this.datahzhb=res.data.datas[2].data,
      //当年收入
      this.datadnsr=res.data.datas[1].data,
      console.log(this.datadnsr,111)
    ))
  }
};
</script>

<style lang = "less" scoped>
.box {
  width: 100%;
  height: 200px;
  background-color: blue;
  ul {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0;
    li {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
      }
    }
  }
  .box-1 {
    width: 80%;
    height: 100px;
    background-color: #cfcfcf;
    border-radius: 10px 10px 0 0;
    margin-left: 40px;
    margin-top: 60px;
    .box-2 {
      margin-top: 10px;
      display: inline-block;
      margin-left: 20px;
      img {
        width: 70px;
        height: 70px;
      }
    }
    .box-3 {
      display: inline-block;
      margin-left: 10px;
      li {
        width: 140px;
      }
    }
    .box-4 {
      display: inline-block;
      font-size: 12px;
    }
  }
}
</style>